<template>
    <div id="dome1">
        <header class="head" :style="jisuan">
            <figure>
                <i class="icon iconfont icon-fenlei"></i>
                <div class="name">分类</div>
            </figure>
            <input type="text" placeholder="315优品汇聚 家电满万减千">
            <i class="icon iconfont icon-hongbao-"></i>
        </header>

        <figure class="banner">
            <swiper :options="swiperOption" ref="mySwiper">

                <swiper-slide><img src="//image4.suning.cn/uimg/cms/img/152111889451769102.jpg"></swiper-slide>
                <swiper-slide><img src="//image4.suning.cn/uimg/cms/img/152111889451769102.jpg"></swiper-slide>
                <swiper-slide><img src="//image.suning.cn/uimg/aps/material/152111880084133222.jpg?from=mobile"></swiper-slide>
                <swiper-slide><img src="//image2.suning.cn/uimg/cms/img/152109515565558531.jpg?from=mobile"></swiper-slide>
                <swiper-slide><img src="//image.suning.cn/uimg/aps/material/152111880084133222.jpg?from=mobile"></swiper-slide>
                <swiper-slide><img src="//image4.suning.cn/uimg/cms/img/152111889451769102.jpg"></swiper-slide>
                <swiper-slide><img src="//image4.suning.cn/uimg/cms/img/152111889451769102.jpg"></swiper-slide>
                <swiper-slide><img src="//image4.suning.cn/uimg/cms/img/152111889451769102.jpg"></swiper-slide>
                <swiper-slide><img src="//image4.suning.cn/uimg/cms/img/152111889451769102.jpg"></swiper-slide>
                <swiper-slide><img src="//image4.suning.cn/uimg/cms/img/152111889451769102.jpg"></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </figure>
        <figure class="advertisement">
            <img src="//image4.suning.cn/uimg/cms/img/152111619397947374.gif">
        </figure>
        <figure class="classify">
            <swiper :options="swiperOptionbox1" class="box1" ref="mySwiper">
                <swiper-slide v-for="(v,i) in 3" :key="i">
                    <ul>
                        <li v-for="(v,i) in list" :key="i">
                            <p><img :src="v.img"></p>
                            <p>{{v.name}}</p>
                        </li>
                    </ul>

                </swiper-slide>
                <!-- <swiper-slide>

                    <ul>
                        <li>
                            <p><img src="//image1.suning.cn/uimg/cms/img/152047774541890227.png"></p>
                            <p>分类</p>
                        </li>
                        <li>
                            <p><img src="//image5.suning.cn/uimg/cms/img/152047778340021445.png"></p>
                            <p>大汇聚</p>
                        </li>
                        <li>
                            <p><img src="//image4.suning.cn/uimg/cms/img/152047780970887522.png"></p>
                            <p>苏宁超市</p>
                        </li>
                        <li>
                            <p><img src="//image3.suning.cn/uimg/cms/img/152047784305838131.png"></p>
                            <p>红孩子母婴</p>
                        </li>
                        <li>
                            <p><img src="//image5.suning.cn/uimg/cms/img/152047786959384565.png"></p>
                            <p>时尚服饰</p>
                        </li>
                        <li>
                            <p><img src="//image4.suning.cn/uimg/cms/img/152047789551945916.png"></p>
                            <p>薄款手机</p>
                        </li>
                        <li>
                            <p><img src="//image1.suning.cn/uimg/cms/img/152047792158511265.png"></p>
                            <p>赚钱</p>
                        </li>
                        <li>
                            <p><img src="//image3.suning.cn/uimg/cms/img/152067053103058328.gif"></p>
                            <p>领云转</p>
                        </li>
                        <li>
                            <p><img src="//image1.suning.cn/uimg/cms/img/152047797758033523.png"></p>
                            <p>海外购</p>
                        </li>
                        <li>
                            <p><img src="//image4.suning.cn/uimg/cms/img/152066239989275283.png"></p>
                            <p>生活家电</p>
                        </li>
                    </ul>

                </swiper-slide> -->
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </figure>
        <section class="advertisementb">
            <figure class="more">
                <img src="//image1.suning.cn/uimg/cms/img/152134300701831124.png">
                <p>上新日满199减100</p>
                <img src="//image3.suning.cn/uimg/cms/img/151252400918312603.png?from=mobile">
            </figure>
            <figure class="dress">
                <div class="la">
                    <p>拉夏贝尔</p>
                    <p>满199减
                        <span>100</span>
                    </p>
                    <p>限时折扣 ></p>
                </div>
                <img src="static/nv.png" class="pian">
                <div class="xie">
                    <p>CONVERSE</p>
                    <img src="//image.suning.cn/uimg/b2c/qrqm/0010130125000000010342296086_200x200.jpg?ver=2000&from=mobile" class="tu">
                    <span>5折</span>
                </div>
                <div class="xie">
                    <p>CONVERSE</p>
                    <img src="//image.suning.cn/uimg/b2c/qrqm/0010136607000000010321241772_200x200.jpg?ver=2000&from=mobile" class="tu">
                    <span>5折</span>
                </div>
            </figure>
        </section>
        <div style="height:100px;"></div>
    </div>
</template>
<script>
export default {
    name: '#dome1',
    data: function() {
        return {
            list:[
                {
                img:"//image1.suning.cn/uimg/cms/img/152047774541890227.png",
                name:"分类"
            },
             {
                img:"//image5.suning.cn/uimg/cms/img/152047778340021445.png",
                name:"大汇聚"
            }, 
            {
                img:"//image4.suning.cn/uimg/cms/img/152047780970887522.png",
                name:"苏宁超市"
            }, 
            {
                img:"//image3.suning.cn/uimg/cms/img/152047784305838131.png",
                name:"红孩子母婴"
            }, 
            {
                img:"//image5.suning.cn/uimg/cms/img/152047786959384565.png",
                name:"时尚服饰"
            },
            {
                img:"//image4.suning.cn/uimg/cms/img/152066239989275283.png",
                name:"生活家电"
            },
            {
                img:"//image1.suning.cn/uimg/cms/img/152047797758033523.png",
                name:"海外购"
            },
            {
                img:"//image3.suning.cn/uimg/cms/img/152067053103058328.gif",
                name:"领云钻"
            },
            {
                img:"//image1.suning.cn/uimg/cms/img/152047797758033523.png",
                name:"海外购"
            },
            {
                img:"//image4.suning.cn/uimg/cms/img/152066239989275283.png",
                name:"生活家电"
            },

            ],
            swiperOption: {
                autoplay: true,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                },
            },
            swiperOptionbox1: {

            },
            jianting: 0
        }
    },
    //封装函数
    methods: {
        sc() {
            this.jianting = document.documentElement.scrollTop || document.body.scrollTop
        }
    },
    //监听
    computed: {
        jisuan() {
            if (this.jianting > 1) {
                return "background:#fabc09"
            }
        }
    },

    //页面加载执行 
    mounted() {
        // setInterval(()=>{
        //     this.aa="background:#525136"
        // },5000)
        onscroll = this.sc
    }

}



</script>
<style scoped lang="less">
.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}

body,
html {
    background: #ccc;
}

@f: 3em;
@c: red;
.w(@width) {
    .px2rem(width, @width)
}

.w(@height) {
    .px2rem(height, @height)
}

.head {
    display: flex;
    justify-content: space-between;
    padding: 2% 3%;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    figure {
        color: #fff;
        .px2rem(width, 60);
        .px2rem(width, 60);
        position: relative;
        .px2rem(top, -8);
        i {
            color: #fff;
            .px2rem(font-size, 50);
            display: inline-block;
        }
        .name {
            display: inline-block;
            .px2rem(font-size, 25);
        }
    }
    input {

        border-radius: 1rem;
        .px2rem(height, 60);
        border: none;
        border: 1px solid #faf8f9;
        background: #faf8f9;
        margin: 0 10px;
        width: 100%;
        z-index: 10;


        &::placeholder {
            color: #666;
            background: url(../../static/ss.png) no-repeat 0.4rem center;
            .px2rem(padding-left, 80);
            .px2rem(padding-top, 5);
            .px2rem(background-size, 30);
            font-size: 1.1em;
        }
    }
    .icon-hongbao- {
        font-size: 0.8rem;
        color: red;
        .px2rem(width, 60);
        .px2rem(width, 60);
        .px2rem(margin-right, 40);
        text-align: center;
    }
}

.banner {
    img {
        width: 100%;
    }
}

.advertisement {
    img {
        width: 100%;
    }
}

.classify {
    ul {
        display: flex;
        flex-wrap: wrap;
        text-align: center;

        li {
            .px2rem(padding-top, 30);
            width: 20%;
            p {
                img {
                    width: 60%;
                }
                &:last-child {
                    .px2rem(padding-top, 20);
                    font-size: 1.1em;
                }
            }
        }
    }
}

.box1 {
    .px2rem(height, 400);
}

.advertisementb {
    .px2rem(padding-bottom, 40);
    background: #f8eee5;
    .more {
        display: flex;
        padding: 10px;
        & img:first-child {
            width: 20%;
            height: 18px;
        }
        p {
            width: 100%;

            .px2rem(padding-top, 8);
            .px2rem(padding-left, 10);
            font-size: 1.1em;
        }

        & img:last-child {
            .px2rem(height, 40);
            .px2rem(width, 200);
            display: inline-block;
        }
    }
}

.dress {
    display: flex;
    .la {
        .px2rem(padding-left, 20);
        .px2rem(padding-top, 30);
        p {
            .px2rem(padding-top, 30);
            &:first-child {
                .px2rem(font-size, 32);
                font-weight: bold;
            }
            &:nth-child(2) {
                .px2rem(font-size, 32);
                font-weight: bold;
                span {
                    color: red;
                }
            }
            &:last-child {
                .px2rem(width, 180);
                .px2rem(height, 30);
                background: #9e6d44;
                text-align: center;
                .px2rem(line-height, 6);
                color: #fff;
                font-weight: bold;
                .px2rem(font-size, 26);
                border-radius: 20px;
                .px2rem(margin-top, 20);
            }
        }
    }
    .pian {
        width: 20%;
        height: 40%;
        .px2rem(margin-left, 30);
    }
    .xie {
        width: 20%;
        background: #fff;
        .px2rem(margin-left, 20);

        p {
            .px2rem(font-size, 23);
            font-weight: bold;
            display: flex;
            justify-content: center;
            .px2rem(padding-top, 20);
        }
        .tu {
            width: 100%;
            .px2rem(padding-top, 30);
        }
        span {
            .px2rem(width, 80);
            .px2rem(height, 30);
            background: red;
            display: inline-block;
            border-radius: 20px;
            text-align: center;
            .px2rem(line-height, 30);
            color: #fff;
            .px2rem(margin-top, 15);
            .px2rem(margin-left, 35);
        }
    }
}
</style>
